<template>
    <div class="login flex flex-col">
        <div class="login_main">
            <div class="form_main">
                <!-- 背景图片 -->
                <img class="login_bg" src="./images/u6.svg" alt="" />

                <div class="login_form_container">
                    <div id="u25" class="ax_default _默认样式">
                        <p><span></span></p>
                    </div>

                    <span class="title">AIGC实训平台 </span>

                    <div class="login_form_box">
                        <el-form ref="formRef" :model="formData" size="large" :rules="rules">
                            <el-form-item prop="account">
                                <el-input v-model="formData.account" placeholder="请输入登录账号" @keyup.enter="handleEnter">
                                    <template #prepend>
                                        <div id="u10">
                                            <p><span></span></p>
                                        </div>
                                        <!-- <icon name="el-icon-User"></icon> -->
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input ref="passwordRef" v-model="formData.password" show-password
                                    placeholder="请输入登录密码" @keyup.enter="handleLogin">
                                    <template #prepend>
                                        <div id="u14">
                                            <p><span></span></p>
                                        </div>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <div class="mb-5 form_footer">
                            <el-checkbox v-model="remAccount" label="记住密码"></el-checkbox>

                            <el-tooltip effect="dark" content="请联系客服重置登录密码,电话：400-888-8888" placement="top-start">
                                <span>忘记密码?</span>
                            </el-tooltip>
                        </div>
                        <el-button type="primary" size="large" :loading="isLock" @click="lockLogin" block>
                            登录
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, shallowRef } from "vue";
import type { InputInstance, FormInstance } from "element-plus";
import cache from "@/utils/cache";
import { ACCOUNT_KEY, TOKEN_KEY } from "@/enums/cacheEnums";
import { useLockFn } from "@/hooks/useLockFn";
import { login } from "@/api/user";
const passwordRef = shallowRef<InputInstance>();
const formRef = shallowRef<FormInstance>();
const router = useRouter();
const remAccount = ref(false);
const formData = reactive({
    account: "",
    password: "",
});
const rules = {
    account: [
        {
            required: true,
            message: "请输入账号",
            trigger: ["blur"],
        },
    ],
    password: [
        {
            required: true,
            message: "请输入密码",
            trigger: ["blur"],
        },
    ],
};
// 回车按键监听
const handleEnter = () => {
    if (!formData.password) {
        return passwordRef.value?.focus();
    }
    handleLogin();
};
// 登录处理
const handleLogin = async () => {
    await formRef.value?.validate();
    // 记住账号，缓存
    //   cache.set(ACCOUNT_KEY, {
    //     remember: remAccount.value,
    //     account: remAccount.value ? formData.account : "",
    //   });

    try {
        const _res = await login(formData);
        console.log('_res', _res);
        cache.set(TOKEN_KEY, _res.token)
        cache.set("USER_INFO", _res)
        router.push("/user/teacher");
    } catch (error) { }

    console.log('登录了呢')

    //   router.push("/user/teacher");
};
const { isLock, lockFn: lockLogin } = useLockFn(handleLogin);

onMounted(() => {
    const value = cache.get(ACCOUNT_KEY);
    if (value?.remember) {
        remAccount.value = value.remember;
        formData.account = value.account;
    }
});
</script>

<style lang="scss" scoped>
.login {
    background-image: url('./images/u1_state0.svg');
    background-color: rgba(24, 145, 255, 1);
    background-position: left top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: contain;
    background-origin: border-box;
    border: none;
    border-radius: 0px;
    position: relative;

    .login_main {
        /* 通过定位来上下左右居中 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        font-family: '微软雅黑', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        letter-spacing: normal;
        color: #666666;
        vertical-align: none;
        text-align: center;
        line-height: normal;
        text-transform: none;

        // height: 515px;

        .form_main {
            position: relative;
            width: 500px;
            height: 620px;
            padding-top: 89px;

            //   padding: 80px 20px 60px 20px;
            .login_bg {
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
        }

        .login_avatar {
            position: absolute;
            /* 左右居中 */
            left: 50%;
            transform: translateX(-50%);
            top: 50px;
        }

        .login_form_container {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }

        .title {
            display: flex;
            font-family: 'Microsoft YaHei Bold', 'Microsoft YaHei Regular',
                'Microsoft YaHei', sans-serif;
            font-weight: 700;
            font-style: normal;
            font-size: 32px;
            color: #ffffff;

            margin-top: 22px;
            margin-bottom: 22px;
        }

        .login_form_box {
            width: 75%;
        }
    }

    :deep(.el-input-group__prepend) {
        background-color: transparent;
        // border: none;
        padding: 0 5px;
        border: 1px solid transparent;
        box-shadow: none;
        color: white;
    }

    :deep(.el-input) {
        background-image: url('./images/input_border.svg');
    }

    :deep(.el-input__wrapper) {
        background-color: transparent;
        box-shadow: none;
        // padding-right: 0px;
        padding-left: 0px;

        .el-input__inner::-webkit-input-placeholder {
            color: white;
        }

        .el-input__inner {
            color: white;
        }
    }

    :deep(.el-button) {
        width: 100%;
        color: #409eff;
        background-color: rgba(255, 255, 255, 0.8);
        border: 0px;
        height: 50px;
        font-weight: 900;
    }

    :deep(.el-checkbox__inner::after) {
        // background-color: rgb(255, 255, 255);
        border: 1px solid #409eff;
        border-left: 0;
        border-top: 0;
    }

    :deep(.el-checkbox__inner) {
        background-color: white;
    }

    @apply min-h-screen bg-no-repeat bg-center bg-cover;

    .login-card {
        height: 400px;
    }
}

.form_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f2f2f2;
    // font-family: Microsoft;
    font-family: 'Microsoft', sans-serif;
    font-size: 14px;

    :deep(.el-checkbox__label) {
        color: #f2f2f2;
        // font-family: Microsoft;
        font-family: 'Microsoft', sans-serif;
        font-size: 14px;
    }
}

#u25 {
    border-width: 0px;
    width: 90px;
    height: 90px;
    display: flex;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    font-style: normal;
    font-size: 80px;
    color: #ffffff;
}

#u10 {
    border-width: 0px;
    display: flex;
    font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro Regular',
        'Font Awesome 5 Pro', sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 24px;
    color: #ffffff;
}

#u14 {
    border-width: 0px;

    display: flex;
    font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro Regular',
        'Font Awesome 5 Pro', sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 18px;
    color: #ffffff;
}
</style>
